<template>
  <div id="LoginView">
    <div class="box">
      <div class="box_top">
        <div>
          <div>
            <img src="../images/logo.png" alt="">
          </div>
          <div>
            <h3>厚溥外卖管理系统</h3>
          </div>
        </div>
      </div>
      <div class="box_main">
        <div><el-input v-model="inputOne" style="width: 20vw;height: 2vw;font-size: 0.9vw;" placeholder="请输入用户名"
            class="input" /></div>
        <div><el-input v-model="inputTwo" style="width: 20vw;height: 2vw;font-size: 0.9vw;" type="password"
            placeholder="请输入密码" show-password class="input" /></div>
        <div>
          <p>忘记账号/密码</p>
        </div>
      </div>
      <div class="box_bottom">
        <el-button type="primary" class="loginBtn" @click="handleLogin">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
//引入第二层
import { fetchLogin, fetchLoginTwo } from '../api/index';

// 在组件挂载时添加事件监听器
onMounted(() => {
  document.body.style.backgroundColor = '#718fe5';
});

//离开组件后卸载颜色变化
onUnmounted(() => {
  document.body.style.backgroundColor = ''; // 可以设置为默认颜色或者''
});

//input
const inputOne = ref('')
const inputTwo = ref('')

//格式书写
interface IUserInfo {
  account: string,
  password: string,
}

//登录效果,成功登录就本地存储账号的信息
const handleLogin = async () => {
  const userInfo = ref<IUserInfo>({
    account: inputOne.value,
    password: inputTwo.value,
  });

  const res = await fetchLogin(userInfo.value);
  alert(res.data.msg);
  //console.log(res);//成功拿到
  //console.log(res.data.token);

  //本地存储token值
  sessionStorage.setItem('t_k', res.data.token);

  //获取账号列表
  const res2 = await fetchLoginTwo();
  //console.log(res2);//成功拿到
  //本地存储需要的长哈信息
  sessionStorage.setItem('MyId', res2.data.accountInfo.id)
  sessionStorage.setItem('MyAccount', res2.data.accountInfo.account)
  sessionStorage.setItem('MyImage', res2.data.accountInfo.imgUrl)
  sessionStorage.setItem('MyUserGroup', res2.data.accountInfo.userGroup)
  sessionStorage.setItem('MyCtime', res2.data.accountInfo.ctime)
  //跳转到下个页面
  const MyToken = sessionStorage.getItem('t_k');
  if (MyToken) {
    // 跳转主组件
    router.replace('/home/backstage');//使用replace方法禁止重新回退至登录页
  } else {
    alert('跳转失败');
  }
}

//----------------------------------------
</script>

<style scoped>
.box {
  width: 25vw;
  height: 40vh;
  margin: 15vw auto;
  border-radius: 2vw;
  background-color: #fff;

  .box_top {
    width: 30vw;
    height: 10vh;

    >div {
      width: 18vw;
      height: 5vh;
      display: flex;
      margin: 0 auto;
      position: relative;
      top: 2vw;

      >div:nth-child(1) {
        width: 4vw;
        height: 5vh;
      }

      >div:nth-child(2) {
        width: 10vw;
        height: 5vh;
        line-height: 1.5vh;
      }
    }

    img {
      width: 3vw;
      height: 3vw;
    }

    h3 {
      font-size: 1vw;
    }
  }

  .box_main {
    width: 25vw;
    height: 20vh;

    >div {
      width: 20vw;
      margin: 0 auto;

      >.input {
        margin-top: 2vw;
      }
    }

    p {
      text-align: right;
      font-size: 0.8vw;
      color: #999999;
      cursor: pointer;
    }
  }

  .box_bottom {
    width: 25vw;
    height: 10vh;
    text-align: center;

    .loginBtn {
      width: 20vw;
      height: 2vw;
      font-size: 1vw;
      margin-top: 1.5vw;
    }
  }
}
</style>